<template>
	<el-dialog
		:title="title"
		:visible.sync="visible"
		custom-class="label-dialog"
		:before-close="close"
		width="380px"
	>
		<div class="select" v-if="operate === 'select'">
			<div class="dialog-content">
				<el-form ref="labelSelect" :model="form" label-width="80px">
					<el-form-item label="标签名：">
						<el-select
							v-model="form.selectLabel"
							multiple
							size="small"
							allow-create
							default-first-option
							placeholder="请选择标签"
						>
							<el-option
								v-for="(item, index) in options"
								:key="index"
								:label="item"
								:value="item"
							></el-option>
						</el-select>
						<i class="el-icon-plus create-label" @click="createLabel()"></i>
					</el-form-item>
					<el-form-item label="已选：" v-if="form.selectLabel.length > 0">
						<div class="label-list">
							<el-tag
								v-for="(item, index) in form.selectLabel"
								:key="index"
								:disable-transitions="false"
								@close="removeSelectLabel(index)"
								size="small"
								style="margin: 4px"
								closable
							>
								{{ item }}
							</el-tag>
						</div>
					</el-form-item>
				</el-form>
			</div>
			<div class="dialog-footer">
				<el-button size="small" @click="close">取消</el-button>
				<el-button size="small" type="primary" @click="submitSelect">确定</el-button>
			</div>
		</div>
		<div class="create" v-if="operate === 'create'">
			<i class="el-icon-back" @click="selectLabel()"></i>
			<div class="dialog-content">
				<el-form ref="labelForm" :model="form" label-width="90px" @submit.native.prevent>
					<el-form-item label="标签名：">
						<el-input
							class="label-input"
							type="text"
							size="small"
							placeholder="请输入标签名"
							v-model="form.newLabel"
							clearable
							style="width: 90%"
							@keyup.enter.native="submitCreate"
						>
						</el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="dialog-footer">
				<el-button size="small" type="primary" @click="submitCreate">新增</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
export default {
	name: 'label-dig',
	props: {
		// 得到item
		item: {
			type: [Object, String]
		},
		tagType: {
			type: Boolean
		}
	},
	data() {
		return {
			options: [],
			title: '添加标签',
			operate: 'select',
			visible: false,
			form: {
				selectLabel: [],
				newLabel: ''
			},
			isBatch: false
		};
	},
	created() {},
	methods: {
		open(options, isBatch) {
			this.isBatch = isBatch;
			this.visible = true;
			// 初始化标签列表
			this.options = options;
		},
		close() {
			this.visible = false;
			this.form.selectLabel = [];
			this.form.newLabel = [];
			this.operate = 'select';
		},
		// 创建标签
		createLabel() {
			this.operate = 'create';
			this.title = '创建标签';
		},
		selectLabel() {
			this.operate = 'select';
			this.title = '选择标签';
		},
		// 移除标签
		removeSelectLabel(i) {
			this.form.selectLabel.splice(i, 1);
		},
		// 提交
		submitSelect() {
			// 至少选择一个标签
			let len = 0;
			let labelArr = [];
			this.form.selectLabel.forEach(item => {
				if (item) {
					len++;
				}
			});
			if (len === 0) {
				this.$message.error('请至少选择一个标签');
				return false;
			}
			// 数组合并
			console.log(this.isBatch);
			if (this.isBatch) {
				labelArr = this.form.selectLabel;
			} else {
				labelArr = this.item.labelList.concat(this.form.selectLabel);
			}
			// 数组去重
			labelArr = this.arrDuplicate(labelArr);
			if (this.tagType) {
				if (this.isBatch) {
					this.$service.msgList.user
						.update({
							ids: this.item,
							labels: labelArr.join(',')
						})
						.then(() => {
							this.$message.success('增加成功');
							this.$emit('refresh');
							this.close();
						})
						.catch(err => {
							this.$message.error(err);
						});
				} else {
					this.$service.msgList.user
						.update({
							id: this.item.id,
							label: labelArr.join(',')
						})
						.then(() => {
							this.$message.success('增加成功');
							this.$emit('refresh');
							this.close();
						})
						.catch(err => {
							this.$message.error(err);
						});
				}
			} else {
				this.$emit('refresh', labelArr.join(','));
				this.close();
			}
		},
		// 数组下标去重法
		arrDuplicate(arr) {
			let tempArr = [];
			for (let i = 0; i < arr.length; i++) {
				if (arr.indexOf(arr[i]) === i && arr[i]) {
					tempArr.push(arr[i]);
				}
			}
			return tempArr;
		},
		// 创建标签
		submitCreate() {
			if (this.form.newLabel.length === 0) {
				this.$message.error('请输入标签名');
				return false;
			}
			let repeat = 0;
			for (let i = 0; i < this.options.length; i++) {
				if (this.options[i] === this.form.newLabel) {
					this.$message.error('当前标签已存在');
					repeat++;
				}
			}
			if (repeat === 0) {
				this.options.push(this.form.newLabel);
				this.form.selectLabel.push(this.form.newLabel);
				this.$message.success('创建成功');
				this.selectLabel();
			}
		}
	}
};
</script>

<style lang="stylus" scoped>
.label-dialog {
	position: relative;
	.select {
		.create-label {
			margin-left 10px
			cursor pointer
			color $main-color
			font-size 16px
			line-height 30px
		}
		.label-input {
			width 70%
			margin-bottom 20px
		}
		.remove-label {
			margin-left 20px
			cursor pointer
			color $main-color
		}
		i {
			cursor pointer
			transition .3s
			color $main-color
			margin-left 4px
			font-size 20px
			&:hover {
				opacity .8
			}
		}
		.label-list {
			min-height: 40px;
			flexBox(flex-start, center, row, wrap)
			.label-item {
				padding 0 4px
				line-height 18px
				margin 6px 4px
				text-align center
				background #FFE4D1
				color $main-color
				border 1px solid $main-color
				border-radius 4px
				font-size 12px
				i {
					font-size 12px
				}
			}
		}
	}

	.create {
		.el-icon-back {
			position absolute
			top: 16px
			font-size 16px
			cursor pointer
			transition .3s
			&:hover {
				color $main-color
			}
		}
	}
}
</style>
